<template>
	<view class="my-waterfall">
		<myWaterfall v-model="flowList">
			<template v-slot:left="{leftList}">
				<MyGoodsDemo :list="leftList"></MyGoodsDemo>
			</template>
			<template v-slot:right="{rightList}">
				<MyGoodsDemo :list="rightList"></MyGoodsDemo>
			</template>
		</myWaterfall>
		<!-- 加载更多 -->
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus"></u-loadmore>
	</view>
</template>

<script>
	import myWaterfall from '@/components/u-myWaterfall.vue'
	import MyGoodsDemo from '@/components/MyGoodsDemo.vue'
	export default {
		components: {
			myWaterfall,
			MyGoodsDemo
		},
		data() {
			return {
				shopId: '',
				loadStatus: 'nomore',
				flowList: [],
				list: [],
				start: 1,
				length: 10,
				isLastPage: false,
				index:0,
			}
		},
		onLoad(query) {
			let that = this;
			that.shopId = query.shopId;
			that.loadDish(that);
			// that.addRandomData();
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 500)
		},
		onReachBottom() {
			let that = this;
			if (that.isLastPage) {
				that.loadStatus = 'nomore';
				return;
			}
			that.start = that.start + 1;
			that.loadDish(that)
		},
		methods: {
			loadDish(ref) {
				let that = this;
				let data = {
					shopId: that.shopId,
					start: ref.start,
					length: ref.length
				}
				that.$ajax(that.$url.searchDishesByShopId, "POST", data, function(resp) {
					// that.list = resp.data.result
					if (resp.data.result == null || resp.data.result.length == 0) {
						ref.isLastPage = true;
						ref.start = ref.start - 1;
						that.loadStatus = 'nomore';
						uni.showToast({
							icon: 'none',
							title: '已经到底了'
						});
					} else {
						ref.isEmpty = false;
						if (ref.start == 1) {
							ref.list = [];
						}
						ref.list = ref.list.concat(resp.data.result);
						if(!that.isLastPage){
							that.addRandomData();
						}
					}
				})
			},
			addRandomData() {
				let that = this;
				for (let i = 0; i < that.list.length; i++) {
					// let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[that.index]))
					that.index += 1;
					console.log(item);
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.my-waterfall {
		width: 750rpx;

		.waterfall-box {
			border-radius: 16rpx;
			margin: 10rpx;
			background-color: #ffffff;
			padding: 16rpx;
			position: relative;

			.box-item-title {
				width: 320rpx;
				font-size: 26rpx;
				margin-top: 10rpx;
				color: #434343;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.box-item-price {
				font-size: 30rpx;
				color: #ff4142;
				margin-top: 10rpx;
			}

			.box-item-tag {
				display: flex;
				margin-top: 10rpx;

				.tag-owner {
					background-color: #FF4142;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					font-size: 16rpx;
					line-height: 1;
				}

				.tag-text {
					border: 1px solid #FF4142;
					color: #FF4142;
					margin-left: 20rpx;
					border-radius: 50rpx;
					line-height: 1;
					padding: 4rpx 14rpx;
					display: flex;
					align-items: center;
					font-size: 20rpx;
				}
			}

			.box-comment {
				font-size: 22rpx;
				color: $u-tips-color;
				margin-top: 5px;
			}
		}

	}
</style>